<div class="content-section introduction">
    <div>
        <span class="feature-title">Rating</span>
        <span>Rating components is a star based selection input.</span>
    </div>
</div>

<div class="content-section implementation">
    <h3 class="first">Basic {{val1}}</h3> 
    <p-rating [(ngModel)]="val1"></p-rating>
    <br />

    <h3>Callback {{val2}}</h3>
    <p-rating [(ngModel)]="val2" (onRate)="handleRate($event)" (onCancel)="handleCancel($event)"></p-rating> <span *ngIf="msg" style="margin-left:10px">{{msg}}</span>
    <br />

    <h3>No Cancel {{val3}}</h3> 
    <p-rating [(ngModel)]="val3" [cancel]="false"></p-rating>
    <br />

    <h3>ReadOnly</h3> 
    <p-rating [ngModel]="5" readonly="true" stars="10" [cancel]="false"></p-rating>
    <br />

    <h3>Disabled</h3> 
    <p-rating [ngModel]="val4" disabled="true" stars="10"></p-rating>
    <br />
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="Documentation">
            <h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;RatingModule&#125; from 'primeng/primeng';
</code>
</pre>

            <h3>Getting Started</h3>
            <p>Two-way value binding is defined using ngModel.</p>
                    
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-rating [(ngModel)]="val"&gt;&lt;/p-rating&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class ModelComponent &#123;

    val: number;

&#125;
</code>
</pre>

            <p>Defining a default value would be enough to display the initial number of selected stars.</p>
<pre>
<code class="language-typescript" pCode ngNonBindable>
export class ModelComponent &#123;

    val: number = 3;

&#125;
</code>
</pre>

            <h3>Model Driven Forms</h3>
            <p>Rating can be used in a model driven form as well.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-rating formControlName="score"&gt;&lt;/p-rating&gt;
</code>
</pre>

                    <h3>Properties</h3>
                    <div class="doc-tablewrapper">
                        <table class="doc-table">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Type</th>
                                    <th>Default</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>stars</td>
                                    <td>number</td>
                                    <td>5</td>
                                    <td>Number of stars.</td>
                                </tr>
                                <tr>
                                    <td>cancel</td>
                                    <td>boolean</td>
                                    <td>true</td>
                                    <td>When specified a cancel icon is displayed to allow removing the value.</td>
                                </tr>
                                <tr>
                                    <td>disabled</td>
                                    <td>boolean</td>
                                    <td>false</td>
                                    <td>When present, it specifies that the element should be disabled.</td>
                                </tr>
                                <tr>
                                    <td>readonly</td>
                                    <td>boolean</td>
                                    <td>false</td>
                                    <td>When present, changing the value is not possible.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <h3>Events</h3>
                    <div class="doc-tablewrapper">
                        <table class="doc-table">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Parameters</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>onRate</td>
                                    <td>event.originalEvent: browser event <br>
                                        event.value: selected value
                                    </td>
                                    <td>Callback to invoke on rate change.</td>
                                </tr>
                                <tr>
                                    <td>onCancel</td>
                                    <td>event: browser event</td>
                                    <td>Callback to invoke when value is removed.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <h3>Styling</h3>
                    <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
                    <div class="doc-tablewrapper">
                        <table class="doc-table">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Element</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>ui-rating</td>
                                    <td>Container element</td>
                                </tr>
                                <tr>
                                    <td>ui-rating-star</td>
                                    <td>Star element</td>
                                </tr>
                                <tr>
                                    <td>ui-rating-star-on</td>
                                    <td>Selected star element.</td>
                                </tr>
                                <tr>
                                    <td>ui-rating-cancel</td>
                                    <td>Cancel icon.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <h3>Dependencies</h3>
                    <p>None.</p>
                </p-tabPanel>

                <p-tabPanel header="Source">
                    <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/rating" class="btn-viewsource" target="_blank">
                        <i class="fa fa-github"></i>
                        <span>View on GitHub</span>
                    </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;h3 class="first"&gt;Basic {{val1}}&lt;/h3&gt; 
&lt;p-rating [(ngModel)]="val1"&gt;&lt;/p-rating&gt;

&lt;h3&gt;Callback {{val2}}&lt;/h3&gt;
&lt;p-rating [(ngModel)]="val2" (onRate)="handleRate($event)" (onCancel)="handleCancel($event)"&gt;&lt;/p-rating&gt; &lt;span *ngIf="msg" style="margin-left:10px"&gt;{{msg}}&lt;/span&gt;

&lt;h3&gt;No Cancel {{val3}}&lt;/h3&gt; 
&lt;p-rating [(ngModel)]="val3" [cancel]="false"&gt;&lt;/p-rating&gt;

&lt;h3&gt;ReadOnly&lt;/h3&gt; 
&lt;p-rating [ngModel]="5" readonly="true" stars="10" [cancel]="false"&gt;&lt;/p-rating&gt;

&lt;h3&gt;Disabled&lt;/h3&gt; 
&lt;p-rating [ngModel]="val4" disabled="true" stars="10"&gt;&lt;/p-rating&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class RatingDemo &#123;

    val1: number;

    val2: number = 5;

    val3: number;

    val4: number = 5;

    msg: string;

    handleRate(event) &#123;
        this.msg = "You have rated " + event.value;
    &#125;

    handleCancel(event) &#123;
        this.msg = "Rating Cancelled";
    &#125;
&#125;
</code>
</pre>
                </p-tabPanel>
            </p-tabView>
        </div>